<!--
 * @Author: 宋杰
 * @Date: 2021-03-16 14:32:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 20:45:28
 * @Description: 一家十一口(猜一字)头部浮动计数器
-->
<template>
  <div class="divBox">
    <!-- 第一行 -->
    <div class="FK_FirstLineBox">
      <div>
        <div class="FirstLineBox_text1">每日累放金额(元)</div>
        <div class="FirstLineBox_text2">
          <div class="num_Box" v-for="(item, index) in numList" :key="index">
            {{ item }}
          </div>
        </div>
        <div class="FirstLineBox_text3">截止2020.3.23</div>
      </div>
    </div>
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      // 第一行数字
      numList: [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {},
};
</script>
<style lang="scss" scoped>
.divBox {
  width: 100%;
  height: 0.3rem;
  // position: relative;
  // border: 1px solid #bbf51c;
}
// 第一行
.FK_FirstLineBox {
  // position: absolute;
  // top: -0.4rem;
  // border: 0.0125rem solid rgb(12, 170, 233);
  // flex: 1;
  height: 0.9rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    border: 0.0125rem solid rgba($color: #1cdff5, $alpha: 1);
    height: 0.7125rem;
    width: 12.9125rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // 左边文字
    .FirstLineBox_text1 {
      font-family: AlibabaPuHuiTiM;
      font-size: 0.3rem;
      color: #ffffff;
      letter-spacing: 0;
    }
    // 中间文字
    .FirstLineBox_text2 {
      // border: 1px solid #1cdff5;
      flex: 1;
      height: 100%;
      margin: 0 0.2rem;
      display: flex;
      align-items: center;
      .num_Box {
        flex: 1;
        height: 100%;
        background: url("../../assets/wenzi.png") no-repeat;
        background-size: 100% 100%;
        font-size: 0.35rem;

        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    // 右边文字
    .FirstLineBox_text3 {
      font-family: AlibabaPuHuiTiR;
      font-size: 0.4rem;
      color: #ffffff;
      letter-spacing: 0;
    }
  }
}
// 第一行 end
</style>
